<!-- MyCustomComponent.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Select } from 'ant-design-vue';

import { loadOrganizationMemberPageApi } from '#/api';

interface OrganizationMemberProps {
  // eslint-disable-next-line vue/require-default-prop
  organizationId?: string;
  // eslint-disable-next-line vue/require-default-prop
  initOptions?:
    | { label: string; value: string }
    | { label: string; value: string }[];
}

defineOptions({
  name: 'OrganizationMemberSelect',
});
const props = withDefaults(defineProps<OrganizationMemberProps>(), {});
const modelValue = defineModel<any>();
const memberOptions = ref<{ label: string; value: string }[]>([]);
onMounted(() => {
  if (props.initOptions) {
    memberOptions.value = Array.isArray(props.initOptions)
      ? props.initOptions
      : [props.initOptions];
  }
});
function search(value: string) {
  if (!value || value.trim() === '') {
    return;
  }
  loadOrganizationMemberPageApi({
    current: 1,
    size: 20,
    searchCount: false,
    organizationId: props.organizationId,
    name: value,
  }).then((response) => {
    memberOptions.value = response.records.map((item: any) => ({
      label: item.name,
      value: item.organizationMemberId,
    }));
  });
}
</script>
<template>
  <Select
    v-model:value="modelValue"
    :allow-clear="true"
    :filter-option="false"
    :options="memberOptions"
    :placeholder="$t('common.placeholder.select')"
    :show-search="true"
    @search="search"
  />
</template>
